<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>试卷管理</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
    <link rel="stylesheet" href="../static/css/ques/02.css"/>
    <script src="../static/elementui/index.js"></script>



</head>
<body>



<div id="alice">

    试卷管理

    <el-divider></el-divider>
    <div class="div_box">
        <div class="div_box1">免费练习</div>
        <div class="div_box2"></div>
        <div class="div_box3">
            <el-button @click="handleClick()" type="primary" size="mini">立即创建</el-button>
        </div>
    </div>

    <div class="div_box">
        <div class="div_box1">随堂练习</div>
        <div class="div_box2"></div>
        <div class="div_box3">
            <el-button @click="handleClick()" type="primary" size="mini">立即创建</el-button>
        </div>
    </div>

    <div class="div_box">
        <div class="div_box1">历年真题</div>
        <div class="div_box2"></div>
        <div class="div_box3">
            <el-button @click="handleClick()" type="primary" size="mini">立即创建</el-button>
        </div>
    </div>


    <div id="crazy_hat">


        <div class="div_out">

            <div class="span">
                试卷名称：
                <div class="div_inner">
                    <el-input v-model="testName" placeholder="请输入名称"></el-input>
                </div>
            </div>

            <div class="span">
                <span class="star">*</span> 试卷状态：

                <div class="div_inner">

                    <el-select v-model="options_selected" placeholder="选择试卷状态"   size="small">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

                        </el-option>
                    </el-select>
                </div>
            </div>

            <div class="span">
                <span class="star">*</span> 试卷类型：

                <div class="div_inner">

                    <el-select v-model="test_type_selectedID" placeholder="选择试卷类型"  @change="get_test_typeID" size="small">
                        <el-option v-for="item in test_type" :key="item.id" :label="item.name" :value="item.id">
                            {{item.name}}
                        </el-option>
                    </el-select>
                </div>
            </div>


            <div class="span">
                <el-button @click="search" type="primary" size="small">查询</el-button>
            </div>

            <div class="span">
                <el-button @click="reset" type="primary" size="small">重置</el-button>
            </div>

            <template>
                <el-table
                        :data="test"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">

                    <el-table-column  type="selection" width="55"></el-table-column>
                    <el-table-column type="index" width="50" ></el-table-column>
                    <el-table-column prop="testTypeBean.name" label="试卷类型" align="center">
                    </el-table-column>
                    <el-table-column prop="testName" label="试卷名称" align="center">
                    </el-table-column>
                    <el-table-column prop="quesNum" label="题目数量" align="center">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center">
                    </el-table-column>

                    <el-table-column fixed="right" prop="manager" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="edit" type="text" size="mini" >编辑</el-button>
                            <el-button @click="del(scope.row,scope.$index)" type="text"  size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 分页组件 -->
            <div class="block" style="margin-top: 20px;">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[6, 12, 20]"
                               :page-size="6"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total=total>
                </el-pagination>
            </div>



            <!--放置对话框/模态框-->


            <el-dialog
                    title="修改试卷数据"
                    :visible.sync="isVisible"
                    width="30%"
                    :before-close="handleClose">


                <div class="div_out">
                    <span class="star">*</span> 任务名称：
                    <div class="div_inner">
                        <el-input v-model="re_testName" placeholder="请输入名称" ></el-input>
                    </div>
                </div>


                <div class="div_out">
                    <span class="star">*</span> 选择试卷状态：
                    <div class="div_inner">
                        <el-select v-model="re_options_selected" placeholder="选择试卷状态"   size="small">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div class="div_out">
                    <span class="star">*</span> 选择试卷类型：
                    <div class="div_inner">
                        <el-select v-model="re_test_type_selectedID" placeholder="选择试卷类型"  @change="get_test_typeID" size="small">
                            <el-option v-for="item in test_type" :key="item.id" :label="item.name" :value="item.id">
                                {{item.name}}
                            </el-option>
                        </el-select>
                    </div>
                </div>



                <span slot="footer" class="dialog-footer">
                    <el-button @click="isVisible = false">取 消</el-button>
                    <el-button type="primary" @click="alice">确 定</el-button>
              </span>
            </el-dialog>



        </div>

    </div>

</div>


<script src="../static/js/ques/02.js"></script>

</body>
</html>